import { View, ViewProps } from "@tarojs/components";
import { TimeFillIcon, TimeIcon } from "@/components/Icons";
import OutlineInput from "@/components/OutlineInput";

type Props = {
  value: string | number;
  open?: boolean;
  name?: string;
  label: string;
  onChange?: (name: string, value?: number) => void;
  className?: string;
} & ViewProps;

const RestSetting = ({
  value,
  open,
  name,
  label,
  onChange,
  className = "",
}: Props) => {
  const Icon = !open ? (
    <TimeIcon type="default" size={0.8} />
  ) : (
    <TimeFillIcon type="primary" size={0.8} />
  );

  return (
    <View style={{ flex: 1 }} className={`rest-setting ${className}`}>
      <View
        className="flex-align"
        onClick={(e) => {
          e.stopPropagation();
          onChange?.(`toggle${name}`);
        }}
      >
        {Icon}
        <View style={{ margin: "0 2px" }}>{label}</View>
      </View>
      {open && (
        <OutlineInput
          style={{ marginLeft: "2px" }}
          value={value}
          small
          unit="s"
          onValueChange={(e) => onChange?.(name, e.target.value)}
          onClick={(e) => e.stopPropagation()}
        />
      )}
    </View>
  );
};

export default RestSetting;
